<template>
    <div>
        <h3>显示</h3>
        优惠券标题:
        <input type="text" v-model="can.title">
        日期:
        <input type="date" v-model="can.sdate">- <input type="date" v-model="can.edate">
        <input type="button" value="查询" @click="show">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>Id</td>
                    <td>优惠券类型</td>
                    <td>优惠券标题</td>
                    <td>副标题</td>
                    <td>图片</td>
                    <td>库存</td>
                    <td>限领数量</td>
                    <td>消费金额</td>
                    <td>减免金额</td>
                    <td>折扣价</td>
                    <td>开始时间</td>
                    <td>结束时间</td>
                    <td>适用业务</td>
                    <td>使用须知</td>
                    <td>门店</td>
                    <td>服务电话</td>
                    <td>优惠券颜色</td>
                    <td>操作</td>
                   
                </tr>
                <tr v-for="item in querinfo.list">
                    <td>{{item.id}}</td>
                    <td>
                    
                        <span v-if="item.discountType==1">代金券</span>
                        <span v-if="item.discountType==2">折扣券</span>
                        <span v-if="item.discountType==3">兑换券</span>
                    </td>
                    <td>{{item.title}}</td>
                    <td>{{item.subTitle}}</td>
                    <td>
                        <img :src="item.photo" alt="" width="100" height="100">
                    </td>
                    <td>{{item.count}}</td>
                    <td>{{item.personNumber}}</td>
                    <td>{{item.amountMoney}}</td>
                    <td>{{item.subMoney}}</td>
                    <td>{{item.zheKou}}</td>
                    <td>{{moment(item.beginTime).format("YYYY-MM-DD")}}</td>
                    <td>{{moment(item.endTime).format("YYYY-MM-DD")}}</td>
                    <td>{{item.userService}}</td>
                    <td>{{item.useDesc}}</td>
                    <td>{{item.shopName}}</td>
                    <td>{{item.phone}}</td>
                    <td> <input type="color"  v-model="item.color" disabled></td>
                    <td>
                        <input type="button" value="删除" class="btn btn-error" @click="del(item.id)">
                      
                    </td>
                   
                </tr>
            </tbody>
        </table>
        <span>共<b>{{ querinfo.totalCount }}</b>条</span>
        <span>共<b>{{querinfo.totalPage  }}</b>页</span>
        <span>每页显示<b>{{can.pageSize  }}</b>条</span>
        <span>当前<b>{{ can.pageIndex }}</b>页/<b>{{  querinfo.totalPage}}</b>页</span>

        <select v-model="can.pageSize" @click="disshow">
            <option :value="item" v-for="item in arr" :key="item">每页<b>{{item}}</b>条</option>
        </select>

        <input type="button" value="首页" @click="fenye(1)">
        <input type="button" value="上一页" @click="fenye(can.pageIndex-1)">

        <span v-for="item in querinfo.totalPage" @click="fenye(item)">{{item}}</span>
        
        <input type="button" value="下一页" @click="fenye(can.pageIndex+1)">
        <input type="button" value="尾页" @click="fenye(querinfo.totalPage)">


      <input type="number" v-model="can.pageIndex">
      <input type="button" value="跳转" @click="fenye(can.pageIndex)">

    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import {ref,reactive,onMounted} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import moment from 'moment';
const route=useRoute();
const router=useRouter();

onMounted(()=>{
    disshow();
})


const del=(id:any)=>{
    if(confirm("确认删除吗?")){
        axios({
            method:'delete',
            url:'/api/Discount/DelDis',
            params:{ids:id},
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert("删除成功");
                disshow();
            }
            else{
                alert("删除失败");
            }
        })
        .catch(err=>{
            console.log(err);
        })
    }
}

const show=()=>{
    can.pageIndex=1;
    disshow();
}

const arr=ref([2,4,6,8,10]);

const fenye=(num:any)=>{
    if(num<1){
        can.pageIndex=1;
    }
    if(num>querinfo.totalCount)
    {
        can.pageIndex=querinfo.totalCount;
    }
    can.pageIndex=num;
    disshow();
}


const can=reactive({
    pageIndex:1,
    pageSize:2,
    title:'',
    sdate:'',
    edate:'',
})
const querinfo:any=reactive({
    list:[],
    totalCount:'',
    totalPage:'',
})
const disshow=()=>{
    axios({
        method:'get',
        url:'/api/Discount/DiscountShow',
        params:can,
    })
    .then(res=>{
        console.log(res);
        querinfo.list=res.data.list
        querinfo.totalCount=res.data.totalCount
        querinfo.totalPage=res.data.totalPage
    })
    .catch(err=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>